<template>
  <div class="upload-container">
    <el-button
      icon="el-icon-picture"
      size="mini"
      :style="{background:color,borderColor:color}"
      type="primary"
      @click=" dialogVisible=true"
    />
    <el-dialog
      title="文件库"
      :visible.sync="dialogVisible"
      width="80%"
      class="mt-dialog"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-tabs type="border-card" style="text-align: center">
        <el-tab-pane v-loading.fullscrenn.lock="hotLoading">
          <span slot="label">
            <svg-icon icon-class="top" />常用文件
          </span>
          <vue-select-image
            :data-images="hotImages"
            w="200"
            h="200"
            @onselectimage="onSelectImage"
          />
        </el-tab-pane>

        <el-tab-pane v-loading.fullscrenn.lock="allLoading" label="全部">

          <div style="width: 40%;display: inline-block;min-width: 500px">
            <div style="text-align: center;margin-bottom: 10px">
              目录:
              <el-cascader
                v-model="selected_directory"
                v-loading="treeLoading"
                clearable
                size="mini"
                :options="directories"
                :show-all-levels="false"
                :props="{ children: 'children', label: 'name', value: 'id' }"
                change-on-select
              />

              添加人：
              <el-select
                v-model="owner_id"
                v-loading="ownersLoading"
                placeholder="添加人"
                filterable
                size="mini"
                clearable
              >
                <el-option
                  v-for="user in users"
                  :key="user.id"
                  :label="user.username"
                  :value="user.id"
                />
              </el-select>
            </div>
          </div>

          <div style="width: 50%;display: inline-block;">
            <el-input
              v-model="kw"
              placeholder="输入目录名称搜索"
              clearable
              style="width: calc(100% - 60px);margin:8px;"
              width="500px"
              size="mini"
              @keyup.native.enter="getList"
            >
              <el-button slot="append" icon="el-icon-search" @click="getList" />
            </el-input>
          </div>

          <vue-select-image
            :data-images="allImages"
            w="200"
            h="200"
            @onselectimage="onSelectImage"
          />

          <el-pagination
            v-if="allImages.length"
            background
            class="mt-pagination"
            :current-page="page"
            :page-sizes="[20,40,80,100]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
          />

        </el-tab-pane>

      </el-tabs>

      <span slot="footer">
        <el-button @click="handleClickCancle">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
require('vue-select-image/dist/vue-select-image.css')
import VueSelectImage from 'vue-select-image'

import {
  GetTree
} from '@/api/crm/crmdirectory'
import {
  Get as GetImages,
  Use as UseImage
} from '@/api/cms/image'
import { Get as GetUsers } from '@/api/users'

const qs = require('qs')

export default {
  name: 'Gallery',
  components: { VueSelectImage },
  props: {
    color: {
      type: String,
      default: '#1890ff'
    }
  },
  data() {
    return {
      link: '',
      dialogVisible: false,

      selectedImages: [],
      hotImages: [],
      allImages: [],

      users: [],
      owner_id: null,
      ownersLoading: false,

      treeLoading: false,
      directories: [],
      selected_directory: [],

      kw: null,
      order_by: '',
      order_desc: '',
      // pagination
      pagesize: 20,
      page: 1,
      total: 0,

      allLoading: false,
      hotLoading: false

    }
  },
  computed: {},
  created() {
    this.getHot()
    this.getList()
    this.handleFetchTree()
    this.handleFetchGetUsers()
  },
  methods: {
    getList() {
      this.allLoading = true
      GetImages(null, qs.stringify({
        kw: this.kwInput,
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc,
        directory_id: this.selected_directory && this.selected_directory[0],
        owner_id: this.owner_id
      }))
        .then(response => {
          this.allImages = response.data.data.map(m => {
            m.src = m.url
            return m
          })
          this.total = response.data.total
          this.allLoading = false
        }).catch(e => {
          this.allLoading = false
        })
    },
    getHot() {
      this.hotLoading = true
      GetImages(null, 'hot=1')
        .then(response => {
          this.hotImages = response.data.map(m => {
            m.src = m.url
            return m
          })
          this.hotLoading = false
        })
        .catch(e => {
          this.hotLoading = false
        })
    },
    handleClickGoogle(v) {
      if (v) {
        window.open(`https://www.google.com/searchbyimage?image_url=${v}`)
      }
    },
    onSelectMultipleImage(v) {
      this.selectedImages = v
    },
    handleFetchTree() {
      this.treeLoading = true
      GetTree()
        .then(response => {
          this.directories = response.data
          this.treeLoading = false
        })
        .catch(e => {
          this.treeLoading = false
        })
    },
    handleFetchGetUsers() {
      this.ownersLoading = true
      GetUsers()
        .then(response => {
          this.ownersLoading = false
          this.users = response.data.data
        })
        .catch(e => {
          this.ownersLoading = false
        })
    },
    handleSubmit() {
      this.dialogVisible = false
      UseImage({
        ids: this.selectedImages.map(m => m.id)
      })
      console.log(this.selectedImages)
      this.$emit('successCBK', this.selectedImages)
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    handleClickCancle() {
      this.dialogVisible = false
    },
    onSelectImage(v) {
      this.selectedImages = [v]
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .editor-slide-upload {
    margin-bottom: 20px;
    :deep(.el-upload--picture-card) {
      width: 100%;
    }
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }
  .mt-dialog >>> .el-dialog {
  margin-top: 60px;
  /*margin: 168px auto !important;*/
  }

  .mt-dialog >>> .el-dialog__body {
  padding-bottom: 100px;
  }
</style>

